<template>
  <div>
    <div class="All">
      <!-- 切换项目 -->
      <!-- 抑郁全面评估 -->
      <div class="Allbox">
        <router-link to="/board/all">
          <div class="fh"><ChevronLeftCircleIcon color="#3BB6FE" style="margin-bottom:2px"/> 返回</div>
        </router-link>
        <!-- <img src="../../static/images/board/gengduo.png" alt="" /> -->
        <div class="title2">心里健康月度趋势</div>
        <div id="chart_1"></div>
      </div>
      <!-- 测评项目参与量 -->
      <div class="appraisal">
        <div class="quantity">
          <!-- <img src="../../static/images/board/gengduo.png" alt="" /> -->
          <div class="title2">评测项目参与量</div>
          <div class="xwabox">
            <div class="jswz">
                <div class="wenzg" style="color:#B3EBD5">正常员工</div>
                <div class="wenzg" style="color:#F6E5C9">轻度抑郁</div>
                <div class="wenzg" style="color:#F7ACAC">重度抑郁</div>
            </div>
            <div id="chart_2"></div>
            <div id="chart_3"></div>
            <div id="chart_4"></div>
          </div>
        </div>

        <div class="distribution">
          <!-- <img src="../../static/images/board/gengduo.png" alt="" /> -->
          <div class="title2">阳性晒出TOP5</div>
          <div id="chart_5"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, onMounted, onUnmounted, ref } from "vue";
import {ChevronLeftCircleIcon} from 'tdesign-icons-vue-next';
import { getGhqMData, getGhqYearsZBsum ,getGhqDeptsum } from "../../api/eachartsaApi";
import * as echarts from "echarts";
import { chart_14, chart_15, chart_16, chart_17 ,chart_18} from "../../echats/Current";
export default {
  components:{ChevronLeftCircleIcon},
  setup() {
    let Echart_1 = ref(null);
    let Echart_2 = ref(null);
    let Echart_3 = ref(null);
    let Echart_4 = ref(null);
    let Echart_5 = ref(null);
    const api1 = async () => {
      var now = new Date();
      var year = now.getFullYear();
      year = year.toString();
      const res = await getGhqMData({ years: year });
      Echart_1 = echarts.init(document.getElementById("chart_1"));
      let casobj = {
        ye: [],
        jl: [],
        zw: [],
        zh: [],
        yy: [],
      };
      res.data.forEach((item) => {
        casobj.ye.push(item.months + "月");
        casobj.jl.push(item.jlnum);
        casobj.zw.push(item.selfnum);
        casobj.zh.push(item.snum);
        casobj.yy.push(item.yunum);
      });
      const casdata = chart_14(echarts);
      casdata.xAxis.data = casobj.ye;
      casdata.series[0].data = casobj.zh;
      casdata.series[1].data = casobj.zw;
      casdata.series[2].data = casobj.yy;
      casdata.series[3].data = casobj.jl;
      Echart_1.setOption(casdata);
    };
    const api2 = async () => {
      var now = new Date();
      var year = now.getFullYear();
      year = year.toString();
      const res = await getGhqYearsZBsum({ years: year });
      Echart_2 = echarts.init(document.getElementById("chart_2"));
      Echart_3 = echarts.init(document.getElementById("chart_3"));
      Echart_4 = echarts.init(document.getElementById("chart_4"));
      let casobj = {
        z: [],
        q: [],
        d: [],
      };
      casobj.z.push(
        { value: Number(res.data[0].zcNum)*100, name: "正常员工" },
        { value: 100 - (Number(res.data[0].zcNum)*100), name: "其他" }
      );
      casobj.q.push(
        { value: Number(res.data[0].qdNum)*100, name: "轻度抑郁" },
        { value: 100 - (Number(res.data[0].qdNum)*100), name: "其他" }
      );
      casobj.d.push(
        { value: Number(res.data[0].zdNum)*100, name: "重度抑郁" },
        { value: 100 - (Number(res.data[0].zdNum)*100), name: "其他" }
      );
      const casdata = chart_15(echarts);
      const casdata1 = chart_16(echarts);
      const casdata2 = chart_17(echarts);
      casdata.series[0].data = casobj.z;
      casdata1.series[0].data = casobj.q;
      casdata2.series[0].data = casobj.d;
      let aa = casobj.z[0].value.toString() + "%";
      let bb = casobj.q[0].value.toString() + "%";
      let cc = casobj.d[0].value.toString() + "%";
      casdata.title[0].text = aa;
      casdata1.title[0].text = bb;
      casdata2.title[0].text = cc;
      Echart_2.setOption(casdata);
      Echart_3.setOption(casdata1);
      Echart_4.setOption(casdata2);
    };
      const api3 = async () => {
       var now = new Date();
      var year = now.getFullYear();
      year = year.toString();
      const res = await getGhqDeptsum({ years: year });
      console.log(res);
      Echart_5 = echarts.init(document.getElementById("chart_5"));
      let casobj = {
        ye: [],
        qd: [],
        zd: [],
        zc: [],
      };
      res.data.forEach((item) => {
        casobj.ye.push(item.department);
        casobj.qd.push(item.yunum);
        casobj.zd.push(item.jlnum);
        casobj.zc.push(item.selfnum);
      });
      const casdata = chart_18(echarts);
      casdata.xAxis[0].data = casobj.ye;
      casdata.series[0].data = casobj.zc;
      casdata.series[1].data = casobj.qd;
      casdata.series[2].data = casobj.zd;
      Echart_5.setOption(casdata);
    };
    onMounted(() => {
      api1();
      api2();
      api3()
    });
    onUnmounted(() => {
       if (Echart_1.value !== null) {
        Echart_1.dispose();
      }
       if (Echart_2.value !== null) {
        Echart_2.dispose();
      }
       if (Echart_3.value !== null) {
        Echart_3.dispose();
      }
       if (Echart_4.value !== null) {
        Echart_4.dispose();
      }
       if (Echart_5.value !== null) {
        Echart_5.dispose();
      }
    });
  },
};
</script>
<style lang="scss" scoped>
.xwabox {
    position: relative;
  width: 95%;
  height: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.jswz{
  position: absolute;
  top: 204px;
  width: 100%;
  height:48px;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  .wenzg{
    width: 33.33%;
    height: 48px;
    font-weight: bold;
    text-align: center;
  }
}
#chart_1 {
  width: 100%;
  height: 400px;
  margin-top: 10px;
}
#myChart {
  height: 100px;
  width: 100px;
  transform: rotateY(180deg);
}
#chart_2 {
  width: 100%;
  height: 250px;
  //   margin-top: 20px;
}

#chart_3 {
  width: 100%;
  height: 250px;
  //   margin-top: 20px;
}

#chart_4 {
  width: 100%;
  height: 250px;
  //   margin-top: 20px;
}

#chart_5 {
  width: 100%;
  height: 90%;
//   margin-top: 10px;
}

#chart_6 {
  width: 850px;
  height: 400px;
  margin-top: 10px;
}
.fh {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 16px;
  margin-bottom: 20px;
  color: #3BB6FE;
  cursor: pointer;
}
.All {
  background-color: rgb(241, 245, 248);
  height: 100%;
  padding: 20px 40px 20px 10px;
  a {
    text-decoration: none;
  }

  a {
    font-size: 24px;
  }
  a:link {
    color: blue;
    text-decoration: none;
  }

  a:visited {
    color: #333;
    text-decoration: none;
  }
  .tabs {
    display: flex;
    gap: 32px;

    .tabs-button {
      width: 160px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: rgb(215, 217, 220);
      border-radius: 15px 15px 0 0;
      font-size: 18px;
      border: 0;
      color: #fff;
    }

    .active {
      width: 160px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: #fff;
      border-radius: 15px 15px 0 0;
      font-size: 24px;
      border: 0;
      color: #333;
    }

    .tabs-button:hover {
      background-color: #fff;
      color: #333;
      cursor: pointer;
    }
  }
  .title {
    font-size: 18px;
  }

  .title2 {
    margin-left: 32px;
    font-size: 18px;
    margin-top: 10px;
  }

  // 当前项目
  .tabs {
    display: flex;
    gap: 32px;

    .active {
      background-color: #fff;
      color: #333;
    }

    button {
      width: 160px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: rgb(215, 217, 220);
      border-radius: 15px 15px 0 0;
      font-size: 24px;
      border: 0;
      color: #fff;
    }
  }

  // 抑郁全面评估
  .Allbox {
    height: 500px;
    width: 98%;
    padding: 0px 28px 0 10px;
      overflow: hidden;
    background-color: #fff;
    border-radius: 0 8px 8px 8px;
    img {
      width: 24px;
      position: relative;
      left: 1524px;
      top: 32px;
    }

    span {
      font-size: 16px;
      font-weight: 400;
      color: #6b81a3;
    }

    .target {
      display: flex;
      height: 200px;
      justify-content: center;
      gap: 283px;

      .target-four {
        width: 100px;
        height: 100%;
        text-align: center;
        margin-top: 26px;

        .target-four-title {
          font-size: 40px;
          line-height: 40px;
          line-height: 56px;
        }

        .target-four-message {
          font-size: 16px;
          color: #7b8c95;
          line-height: 22px;
        }

        .target-gradient {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
          background: linear-gradient(
            110deg,
            #97cbe7 28%,
            #9aeedc 65%,
            #9aeedc 86%
          );
        }
        .target-myChart {
          width: 100px;
          height: 100px;
          &::before {
            display: none;
          }
        }
        .target-gradient::before {
          content: "";
          position: absolute;
          top: 20%;
          left: 20%;
          right: 20%;
          bottom: 20%;
          border-radius: 50%;
          background-color: #fff;
          background-clip: content-box;
        }

        .target-organization {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
          background: linear-gradient(
            90deg,
            #97cbe7 28%,
            rgba(151, 203, 231, 0.9) 65%,
            #e0edf5 100%
          );
        }

        .target-organization::before {
          content: "";
          position: absolute;
          top: 20%;
          left: 20%;
          right: 20%;
          bottom: 20%;
          border-radius: 50%;
          background-color: #fff;
          background-clip: content-box;
        }

        .target-myChart {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
        }

        .target-myChart::before {
          content: "";
          position: absolute;
          top: 20%;
          left: 20%;
          right: 20%;
          bottom: 20%;
          border-radius: 50%;
          background-color: #fff;
          background-clip: content-box;
        }

        .target-sun {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
          background: linear-gradient(90deg, #f7acac 50%, #f7acac);
        }

        .target-sun::before {
          content: "";
          position: absolute;
          top: 20%;
          left: 20%;
          right: 20%;
          bottom: 20%;
          border-radius: 50%;
          background-color: #fff;
          background-clip: content-box;
        }
      }
    }
  }

  // 项目测试进度,阳性晒出
  .test {
    display: flex;
    background-color: rgb(241, 245, 248);
    height: 484px;
    margin-top: 32px;
    gap: 32px;

    .schedule {
      width: 947px;
      height: 100%;
      background-color: #fff;
      border-radius: 8px;

      img {
        width: 24px;
        position: relative;
        left: 898px;
        top: 32px;
      }
    }

    .sun {
      width: 621px;
      height: 100%;
      background-color: #fff;
      border-radius: 8px;

      img {
        width: 24px;
        position: relative;
        left: 571px;
        top: 32px;
      }
    }
  }

  // 测评项目参与量
  .appraisal {
    height: 335px;
    width: 101%;
    background-color: rgb(241, 245, 248);
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .quantity {
      width: 49.8%;
      height: 100%;
      background-color: #fff;

      img {
        position: relative;
        left: 674px;
        width: 24px;
        top: 32px;
      }
    }

    .distribution {
     width: 49%;
      height: 100%;
      background-color: #fff;

      img {
        width: 24px;
        position: relative;
        left: 812px;
        top: 32px;
      }
    }
  }

  // 同行业项目风险平均值同比
  .peer {
    height: 508px;
    width: 1600px;
    background-color: rgb(241, 245, 248);
    margin-top: 38px;
    display: flex;
    gap: 32px;

    .average {
      width: 716px;
      height: 100%;
      background-color: #fff;

      img {
        position: relative;
        left: 674px;
        width: 24px;
        top: 32px;
      }
    }

    .subscribe {
      width: 852px;
      height: 100%;
      background-color: #fff;

      img {
        width: 24px;
        position: relative;
        left: 812px;
        top: 32px;
      }
    }
  }
}
</style>
